<template>
  <div class="node-panel">
    <el-input v-model="inputValue" placeholder="自定义名字，回车新增" @keyup.enter="addInputPlanel"></el-input>
    <div
      v-for="(item, key) in textPlanel"
      :key="key"
      class="approve-node"
      @mousedown="dragNode(item)"
    >
    <div>{{ item.text }}</div>
    
    </div>
    <div
      v-for="(item, key) in state.nodePanel"
      :key="key"
      class="approve-node"
      @mousedown="dragNode(item)"
    >
    <div>{{ item.text }}</div>
    <div>
      <el-image style="width: 120px; height: 50px;pointer-events: none" :src="item.properties.icon" fit="contain" />
    </div>
      <!-- <div class="node-shape" :class="'node-' + item.type"></div> -->
      <!-- <div class="node-label">{{ item.text }}</div> -->
    </div>
  </div>
</template>

<script lang="ts">
export default { name: "NodePanel" };
</script>
<script lang="ts" setup>
import { ILogicFlowNodePanelItem } from "@/types/logic-flow";
import LogicFlow from "@logicflow/core";
import { reactive, ref } from "vue";
import imageAssets from '@/utils/imageAssets';
const inputValue = ref('')
const props = defineProps<{ lf?: LogicFlow }>();
const state = reactive({
  nodePanel: [
    {
      type: "approver",
      text: "风向风速仪",
      properties: {
        iconType: 'fengxiang',  // 使用预定义的图片key
        icon:imageAssets['fengxiang']
      },
    },
    {
      type: "approver",
      text: "边缘计算网关",
      properties: {
        iconType: 'bianyuan',  // 使用预定义的图片key
        icon:imageAssets['bianyuan']
      },
    },
    {
      type: "approver",
      text: "编码器",
      properties: {
        iconType: 'bianmaqi',  // 使用预定义的图片key
        icon:imageAssets['bianmaqi']
      },
    },
    {
      type: "approver",
      text: "风车",
      properties: {
        iconType: 'fengche',  // 使用预定义的图片key
        icon:imageAssets['fengche']
      },
    },
    {
      type: "approver",
      text: "伺服电机",
      properties: {
        iconType: 'sifudianji',  // 使用预定义的图片key
        icon:imageAssets['sifudianji']
      },
    },
    {
      type: "approver",
      text: "伺服电机驱动",
      properties: {
        iconType: 'qudong',  // 使用预定义的图片key
        icon:imageAssets['qudong']
      },
    },
    {
      type: "approver",
      text: "开关",
      properties: {
        iconType: 'kaiguan',  // 使用预定义的图片key
        icon:imageAssets['kaiguan']
      },
    },
    {
      type: "approver",
      text: "电源",
      properties: {
        iconType: 'dianbiao',  // 使用预定义的图片key
        icon:imageAssets['dianbiao']
      },
    },
  ],
 
});
const textPlanel = reactive<{
  type:string
  text:string
}[]>([])
const dragNode = (item: ILogicFlowNodePanelItem) => {
  props.lf?.dnd.startDrag({
    type: item.type,
    text: item.text,
    properties:item.properties
  });
};
const addInputPlanel = ()=>{
  textPlanel.push({
    type:'textModel',
    text: inputValue.value,
  })
  inputValue.value = ''
}
</script>

<style lang="scss" scoped>
.node-panel {
  // position: absolute;
  top: 10px;
  left: 10px;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 0 10px 1px #e4e0db;
  border-radius: 6px;
  text-align: center;
  z-index: 101;
  .approve-node {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding: 10px 0;
    .node-label {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 12px;
    }
  }
  .node-shape {
    box-sizing: border-box;
    &.node-approver {
      width: 120px;
      height: 50px;
      border-radius: 4px;
      border: 2px solid #facd91;
      background-color: #facd91;
    }
    &.node-link {
      width: 120px;
      height: 50px;
      border-radius: 4px;
      border: 2px solid #caf982;
      background-color: #caf982;
    }
    &.node-review {
      width: 120px;
      height: 50px;
      border-radius: 4px;
      border: 2px solid #81d3f8;
      background-color: #81d3f8;
    }
  }
}
</style>
